﻿<div class="customers view indent">
    <div class="container">
        <header>
            <h3><span class="glyphicon glyphicon-user"></span> Customers</h3>
        </header>
        <div class="row">
            <div class="col-md-10">
                <div class="navbar">
                    <ul class="nav navbar-nav">
                        <li data-ng-class="{active: !vm.listDisplayModeEnabled}" class="toolbaritem">
                            <a data-ng-click="vm.changeDisplayMode(vm.DisplayModeEnum.Card)">
                                <span class="glyphicon glyphicon-th-large"></span> Card View
                            </a>
                        </li>
                        <li data-ng-class="{active: vm.listDisplayModeEnabled}" class="toolbaritem">
                            <a data-ng-click="vm.changeDisplayMode(vm.DisplayModeEnum.List)">
                                <span class="glyphicon glyphicon-align-justify"></span> List View
                            </a>
                        </li>
                        <li class="toolbaritem">
                            <a data-ng-click="vm.navigate('/customeredit/0')">
                                <span class="glyphicon glyphicon-plus"></span> Add Customer
                            </a>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <label class="navbarText col-sm-2">Filter:</label>
                            <div class="col-sm-10">
                                <input type="text"
                                       data-ng-model="vm.searchText"
                                       data-ng-change="vm.searchTextChanged()"
                                       class="novalidate form-control" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row cardContainer show-hide-animation" data-ng-hide="vm.listDisplayModeEnabled">
                <div class="col-sm-6 col-md-4 col-lg-3" data-ng-class="vm.cardAnimationClass"
                     data-ng-repeat="customer in vm.filteredCustomers | orderBy:'lastName'">
                    <div class="card">
                        <button class="btn close cardClose" title="Delete Customer" data-ng-click="vm.deleteCustomer(customer.id)">&times;</button>
                        <div class="cardHeader"><a href="#/customeredit/{{customer.id}}" class="white">{{customer.firstName + ' ' + customer.lastName}} <i class="icon-edit icon-white editIcon"></i></a></div>
                        <div class="cardBody">
                            <div class="clearfix">
                                <div class="pull-left cardBodyLeft">
                                    <a href="#/customeredit/{{customer.id}}" class="white"><img data-ng-src="Content/images/{{customer.gender | lowercase}}.png" class="cardImage" /></a>
                                </div>
                                <div class="pull-left cardBodyRight">
                                    <div class="cardBodyContent">{{customer.city}}, {{customer.state.name}}</div>
                                    <div>
                                        <a href="#/customerorders/{{customer.id}}" class="btn-link">
                                            {{ customer.orderCount }}
                                            <span data-ng-pluralize count="customer.orderCount"
                                                  when="{'1': 'Order','other': 'Orders'}">
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row gridContainer customersTable show-hide-animation" data-ng-show="vm.listDisplayModeEnabled">
                <div class="col-md-10">
                    <div>
                        <table class="table table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th>&nbsp;</th>
                                    <th data-ng-click="vm.setOrder('lastName')">Name</th>
                                    <th data-ng-click="vm.setOrder('city')">Location</th>
                                    <th data-ng-click="vm.setOrder('orderCount')">Orders</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="customer in vm.filteredCustomers | orderBy:vm.orderby:vm.reverse" class="repeat-animation">
                                    <td><a href="#/customeredit/{{customer.id}}"><img data-ng-src="Content/images/{{customer.gender | lowercase}}.png" class="cardImage" alt="Customer Image" /></a></td>
                                    <td><a href="#/customeredit/{{customer.id}}">{{customer.firstName + ' ' + customer.lastName}}</a></td>
                                    <td>{{customer.city}}, {{customer.state.name}}</td>
                                    <td>
                                        <a href="#/customerorders/{{customer.id}}" class="btn-link">
                                            {{ customer.orderCount }}
                                            <span data-ng-pluralize count="customer.orderCount"
                                                  when="{'1': 'Order','other': 'Orders'}">
                                            </span>
                                        </a>
                                    </td>
                                    <td><button class="btn btn-danger" data-ng-click="vm.deleteCustomer(customer.id)">Delete</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row show-hide-animation" data-ng-show="vm.filteredCustomers.length == 0">
                <div class="col-span-12">
                    <h4>No customers found</h4>
                </div>
            </div>
        </div>
        <div class="row show-hide-animation" data-ng-show="vm.customers.length > 0">
            <div class="col-md-12">
                <div data-pagination
                     data-on-select-page="vm.pageChanged(page)"
                     data-total-items="vm.totalRecords"
                     data-page="vm.currentPage"
                     data-items-per-page="vm.pageSize"
                     data-boundary-links="true"
                     class="pagination-sm"></div>
                <h5>Showing {{ vm.filteredCount }} of {{ vm.totalRecords}} total customers</h5>
            </div>
        </div>
        <br /><br /><br />
    </div>
</div>
